/*
 * @Author: yangzonglong
 * @Date: 2021-03-09 16:03:48
 * @version: v1.0.0
 * @Descripttion: 列
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-11-16 17:46:54
 * @Auditor:
 */
import React, { useCallback, useState, useRef, useMemo } from 'react';
import { Table } from '@library';
import { TableRefProps } from '@library/components/table/interface';
import { Form, Modal, Button } from 'antd';
import update from 'immutability-helper';
import ColumnItem from './ColumnItem';
import Icon from '../../../icon/Icon';

import styles from './style.module.scss';

const FormItem = Form.Item;

const _columns = [
  { dataIndex: 'label', title: '字段名' },
  { dataIndex: 'value', title: '字段' },
];


interface IProps {
  changeControlProps(v: any[]): void;
  columns: any[];
  dataSource: any[];
  title?: string;
}

const Columns = ({ columns, changeControlProps, dataSource, title }: IProps) => {
  const tableRef = useRef<TableRefProps>(null);
  const [visible, setVisible] = useState(false);

  const remove = useCallback(
    (index: number) => {
      changeControlProps(columns?.filter((item, i) => i !== index) || []);
    },
    [changeControlProps, columns]
  );


  const changeValue = useCallback(
    (index: number, value: any) => {
      changeControlProps(columns?.map((item, i) => i !== index ? item : value) || []);
    },
    [changeControlProps, columns]
  );


  const move = useCallback(
    (draggedId: string, hoverId: string) => {
      let draggedIndex: number = 0,
        hoverIndex: number = 0;

      columns?.forEach((item, index) => {
        if (item.value === draggedId) draggedIndex = index;
        if (item.value === hoverId) hoverIndex = index;
      });

      changeControlProps(update(columns, {
        $splice: [
          [draggedIndex, 1],
          [hoverIndex, 0, columns[draggedIndex]],
        ],
      }));

    },
    [changeControlProps, columns]
  );

  const _onOK = () => {
    const rows = tableRef.current?.getSelectedRows();
    changeControlProps(rows || []);
    setVisible(false);
  };

  const _onCancel = () => {
    setVisible(false);
  };

  const _dataSource = useMemo(() => {
    return (dataSource || []).map((_, index) => ({ ..._, id: _.value }));
  }, [dataSource]);

  return (
    <>
      <FormItem label={title || '请选择关联字段'}>
        <ul className={styles.options}>
          {columns?.map((item, i) => (
            <ColumnItem changeValue={changeValue} remove={remove} move={move} originalIndex={i} key={item.value} item={item} />
          ))}
        </ul>
        {/* <p /> */}
        <Button className={styles.btnStyle} onClick={() => {
          setVisible(true);
          setTimeout(() => {
            tableRef.current?.setSelectRowKeys(columns?.map(item => item.value) || [], columns || []);
          }, 300);

        }
        } icon={<Icon icon="&#xe635;" />} block>
          添加新选项
        </Button>

        <Modal destroyOnClose visible={visible} title='字段' width={600} onOk={_onOK} onCancel={_onCancel}>
          <div style={{ flexDirection: 'column', display: 'flex', maxHeight: '600px', overflow: 'auto' }}>
            <Table ref={tableRef} rowSelectionType='checkbox' flat dataSource={_dataSource} columns={_columns} />
          </div>
        </Modal>
      </FormItem>
    </>
  );
};

export default Columns;
